<script>
import { GlFormGroup, GlFormCheckbox, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED } from '../constants';

export default {
  name: 'RunnerFormFields',
  components: {
    GlFormGroup,
    GlFormCheckbox,
    GlFormInput,
    GlLink,
    GlSprintf,
    RunnerMaintenanceNoteField: () =>
      import('ee_component/ci/runner/components/runner_maintenance_note_field.vue'),
  },
  props: {
    value: {
      type: Object,
      default: null,
      required: false,
    },
  },
  data() {
    return {
      model: {
        ...this.value,
      },
    };
  },
  watch: {
    model: {
      handler() {
        this.$emit('input', this.model);
      },
      deep: true,
    },
  },
  HELP_LABELS_PAGE_PATH: helpPagePath('ci/runners/configure_runners', {
    anchor: 'use-tags-to-control-which-jobs-a-runner-can-run',
  }),
  ACCESS_LEVEL_NOT_PROTECTED,
  ACCESS_LEVEL_REF_PROTECTED,
};
</script>
<template>
  <div>
    <h2 class="gl-font-weight-normal gl-font-lg gl-my-5">
      {{ s__('Runners|Details') }}
      {{ __('(optional)') }}
    </h2>
    <gl-form-group :label="s__('Runners|Runner description')" label-for="runner-description">
      <gl-form-input id="runner-description" v-model="model.description" name="description" />
    </gl-form-group>

    <runner-maintenance-note-field v-model="model.maintenanceNote" class="gl-mt-5" />

    <hr aria-hidden="true" />

    <h2 class="gl-font-weight-normal gl-font-lg gl-my-5">
      {{ s__('Runners|Configuration') }}
      {{ __('(optional)') }}
    </h2>

    <div class="gl-mb-5">
      <gl-form-checkbox v-model="model.paused" name="paused">
        {{ __('Paused') }}
        <template #help>
          {{ s__('Runners|Stop the runner from accepting new jobs.') }}
        </template>
      </gl-form-checkbox>

      <gl-form-checkbox
        v-model="model.accessLevel"
        name="protected"
        :value="$options.ACCESS_LEVEL_REF_PROTECTED"
        :unchecked-value="$options.ACCESS_LEVEL_NOT_PROTECTED"
      >
        {{ __('Protected') }}
        <template #help>
          {{ s__('Runners|Use the runner on pipelines for protected branches only.') }}
        </template>
      </gl-form-checkbox>

      <gl-form-checkbox v-model="model.runUntagged" name="run-untagged">
        {{ __('Run untagged jobs') }}
        <template #help>
          {{ s__('Runners|Use the runner for jobs without tags in addition to tagged jobs.') }}
        </template>
      </gl-form-checkbox>
    </div>

    <gl-form-group :label="__('Tags')" label-for="runner-tags">
      <template #description>
        <gl-sprintf
          :message="
            s__('Runners|Multiple tags must be separated by a comma. For example, %{example}.')
          "
        >
          <template #example>
            <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
            <code>macos, shared</code>
          </template>
        </gl-sprintf>
      </template>
      <template #label-description>
        <gl-sprintf
          :message="
            s__(
              'Runners|Add tags for the types of jobs the runner processes to ensure that the runner only runs jobs that you intend it to. %{helpLinkStart}Learn more.%{helpLinkEnd}',
            )
          "
        >
          <template #helpLink="{ content }">
            <gl-link :href="$options.HELP_LABELS_PAGE_PATH" target="_blank">{{ content }}</gl-link>
          </template>
        </gl-sprintf>
      </template>
      <gl-form-input id="runner-tags" v-model="model.tagList" name="tags" />
    </gl-form-group>

    <gl-form-group
      :label="__('Maximum job timeout')"
      :label-description="
        s__(
          'Runners|Maximum amount of time the runner can run before it terminates. If a project has a shorter job timeout period, the job timeout period of the instance runner is used instead.',
        )
      "
      label-for="runner-max-timeout"
      :description="s__('Runners|Enter the number of seconds.')"
    >
      <gl-form-input
        id="runner-max-timeout"
        v-model.number="model.maximumTimeout"
        name="max-timeout"
        type="number"
      />
    </gl-form-group>
  </div>
</template>
